<template>
  <view class="hb-w-full message-container">
    <!-- 渲染富文本内容 -->
    <rich-text
      :preview="true"
      :nodes="renderedText"
      class="hb-text-xs hb-leading-relaxed hb-text-[#323232] message-content"
    ></rich-text>
  </view>
</template>

<script lang="ts" setup>
  import { ref, watch, onMounted, computed, onUnmounted } from 'vue';
  import MarkdownIt from 'markdown-it';
  import hljs from 'highlight.js'; // 导入highlight.js

  const props = defineProps<{
    message: string; // 要显示的消息文本内容
    messageIndex: number; // 消息在消息列表中的索引，用于更新store中的状态
  }>();

  // 状态变量
  const displayText = ref(''); // 当前显示的文本（随打字效果逐渐增加）
  const renderedText = ref(''); // 当前渲染的HTML内容（Markdown处理后）

  // Markdown 渲染器
  const getMarkdownRenderer = () => {
    const md = new MarkdownIt({
      breaks: true,
      linkify: true,
      html: true,
      highlight: function (str: string, lang: string): string {
        // 如果指定了语言且highlight.js支持该语言
        if (lang && hljs.getLanguage(lang)) {
          try {
            // 高亮代码
            const highlightedCode = hljs.highlight(str, {
              language: lang,
              ignoreIllegals: true,
            }).value;
            // 返回高亮后的HTML，添加语言标签和复制按钮
            return `<pre class="hljs"><div class="code-header"><span class="code-lang">${lang}</span></div><code>${highlightedCode}</code></pre>`;
          } catch (e) {
            console.error('代码高亮出错:', e);
          }
        }

        // 不指定语言或不支持的语言，使用默认高亮
        return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
      },
    });

    return md;
  };

  // 渲染 Markdown 内容
  const renderMarkdown = (content: string) => {
    // 删掉所有 <json-card> 标签标签中的内容
    content = content.replaceAll(/<json-card>([\s\S]*?)<\/json-card>/g, '');
    const html = getMarkdownRenderer().render(content || '');
    const styledHtml = applyTableStyles(html);
    return applyImageStyles(styledHtml);
  };

  // 应用表格样式
  const applyTableStyles = (html: string): string => {
    let styledHtml = html;

    // 表格容器样式 - 支持滚动并添加圆角和阴影
    styledHtml = styledHtml.replace(
      /<table>/g,
      '<div class="table-container"><table class="md-table">',
    );

    // 在表格结束标签后添加 div 结束标签
    styledHtml = styledHtml.replace(/<\/table>/g, '</table></div>');

    // 表头单元格样式
    styledHtml = styledHtml.replace(/<th>/g, '<th class="md-th">');

    // 表格数据单元格样式
    styledHtml = styledHtml.replace(/<td>/g, '<td class="md-td">');

    // 表格行样式 - 为偶数行添加不同背景色
    styledHtml = styledHtml.replace(/<tr>/g, '<tr class="md-tr">');

    return styledHtml;
  };

  // 应用图片样式，确保不超出容器宽度
  const applyImageStyles = (html: string): string => {
    // 为所有图片添加样式
    return html.replace(
      /<img(.*?)>/g,
      '<img$1 style="max-width: 100%; height: auto; display: block; margin: 8rpx 0;" />',
    );
  };

  // 打字效果实现
  const typeText = async (text: string) => {
    // 如果没有文本，则清空并设置为完成状态
    if (!text) {
      displayText.value = '';
      renderedText.value = '';
      return;
    }

    // 如果禁用打字效果，则直接显示全部内容

    displayText.value = text; // 设置全部文本
    renderedText.value = renderMarkdown(text); // 渲染Markdown
  };

  // 监听消息变化
  watch(
    () => props.message,
    (newVal) => {
      // 开始新的打字效果
      typeText(newVal);
    },
  );

  // 组件挂载时开始打字效果
  onMounted(() => {
    typeText(props.message);
  });
</script>

<style>
  .table-container {
    overflow-x: auto;
    max-width: 580rpx;
    margin: 20rpx 0;
    border-radius: 8rpx;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  /* 添加消息容器样式，确保普通文本自动换行 */
  .message-container {
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
  }

  .message-content {
    width: 100%;
  }

  .hljs {
    overflow-x: auto;
    max-width: 560rpx;
    display: block;
    background: #282c34;
    color: #abb2bf;
    border-radius: 10rpx;
    padding: 10rpx;
    position: relative;
    font-size: 24rpx;
  }
  .code-header {
    background: #2d343e;
    padding: 10rpx;
    position: sticky;
    top: 0;
    left: 0;
  }

  /* 核心语法高亮样式 */
  .hljs-keyword {
    color: #c678dd;
  }
  .hljs-string {
    color: #98c379;
  }
  .hljs-comment {
    color: #5c6370;
    font-style: italic;
  }
  .hljs-function {
    color: #61afef;
  }

  .hljs-tag {
    color: #e06c75;
  }
  .hljs-attr {
    color: #d19a66;
  }
  .hljs-name {
    color: #e06c75;
  }
  .hljs-attribute {
    color: #98c379;
  }
  .hljs-title {
    color: #61afef;
  }

  /* 注释 */
  .hljs-comment,
  .hljs-quote {
    color: #5c6370;
    font-style: italic;
  }

  /* 关键字 */
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-literal,
  .hljs-doctag {
    color: #c678dd;
  }

  /* 字符串 */
  .hljs-string,
  .hljs-regexp,
  .hljs-addition {
    color: #98c379;
  }

  /* 变量 */
  .hljs-title,
  .hljs-name,
  .hljs-section,
  .hljs-attribute {
    color: #e06c75;
  }

  /* 数字 */
  .hljs-number,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-selector-id,
  .hljs-selector-class,
  .hljs-selector-attr,
  .hljs-selector-pseudo,
  .hljs-template-tag,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable {
    color: #d19a66;
  }

  /* 表格基础样式 */
  .md-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-size: 24rpx;
    overflow: hidden;
    background-color: #fff;
    border-radius: 8rpx;
  }

  /* 表头单元格 */
  .md-th {
    padding: 16rpx 24rpx;
    background: #2878ff;
    color: white;
    text-align: left;
    font-weight: bold;
    border: none;
    white-space: nowrap;
  }

  /* 数据单元格 */
  .md-td {
    padding: 16rpx 24rpx;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
  }

  /* 表格行 */
  .md-tr {
    border: none;
  }

  /* 隔行变色 */
  .md-tr:nth-child(even) {
    background-color: #f9f9fb;
  }

  /* 最后一行不要底部边框 */
  .md-tr:last-child .md-td {
    border-bottom: none;
  }

  /* 首行左上和右上圆角 */
  .md-tr:first-child .md-th:first-child {
    border-top-left-radius: 8rpx;
  }

  .md-tr:first-child .md-th:last-child {
    border-top-right-radius: 8rpx;
  }
</style>
